import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

class ParentCom extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      childData: ''
    }
  }
  setChildData = (data) => {
    this.setState({
      childData: data
    })
  }
  render() {
    return (
      <div>
        <h1>子元素传递给父元素的数据: {this.state.childData}</h1>
        <ChildCom setChildData={this.setChildData}/>
      </div>
    )
  }
}

class ChildCom extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      msg: 'hello world'
    }
    // this.sendData = this.sendData.bind(this)
  }
  // 箭头函数
  sendData = () => {
    console.log(this.state.msg)
    this.props.setChildData(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={this.sendData}>传递helloworld给父元素</button>
        <button onClick={()=>this.props.setChildData("11")}>传递11给父元素</button>
      </div>
    )
  }
}
ReactDOM.render(<ParentCom/>, document.querySelector('#root'))
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
